<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="hand">
      <h5 class="h5hts">
        <i class="el-icon-arrow-left" @click="fan()"></i>&#12288;&#12288;&#12288;
        <p class="psds">社区定位</p>
      </h5>
    </div>
    <div class="site">
      <p>嘉宾花社区 ></p>
      <button class="found">创建</button>
    </div>
    <div class="sou">
      <input type="text" placeholder="搜索我的企业名称">
    </div>
    <div class="message">
      <div class="left">
        <p class="firm">山东华恩信息科技有限公司</p>
        <p class="condition">公司职员 26人 4种用餐标准</p>
        <p class="ruan">软件园A座拉了社区</p>
      </div>
      <div class="right">
        <p class="dizhi">潍坊高新区</p>
        <p class="distance">1.2km</p>
        <button class="jia">+</button>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    fan(){
      this.$router.push('/meal')
    }
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.el-icon-arrow-left {
  float: left;
  
}
.h5hts {
  font-size: 14px;
  padding: 20px 5px 5px 5px;
  
}
.psds {
  float: left;
  width: 86%;
  text-align: center;
}
.site {
  width: 100%;
  height: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.site p {
  float: left;
  font-weight: bold;
  font-size: 15px;
  margin-left: 20px;
}
.found{
  float: right;
  width: 50px;
  line-height: 20px;
  margin-right: 20px;
  background: rgb(255,189,66);
  border: none;
  border-radius: 15px;
}
.sou{
  width: 100%;
  height: 50px;
}
.sou input{
  width: 90%;
  height: 30px;
  margin-left: 5%;
  border: #aaa 1px solid;
  border-radius: 30px;
  padding: 10px;
}
.message{
  width: 95%;
  height: 100px;
  margin-left: 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 5px 1px rgb(138, 130, 189);
}
.message .left{
  float: left;
  width: 60%;
}
.message .right{
  float: right;
  width: 19%;
}
.left .firm{
  font-weight: bold;
  margin: 10px;
  float: left;
}
.left .condition{
  float: left;
  color: rgb(238,173,81);
  font-size: 12px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.left .ruan{
  float: left;
  color: rgb(136,127,213);
  font-size: 12px;
  margin-left: 10px;
}
.right .dizhi{
  float: right;
  width: 65px;
  font-size: 12px;
  margin: 10px;
  color: #aaa;
}
.right .distance{
  float: right;
  width: 55px;
  margin-bottom: 10px;
  font-size: 12px;
}
.right .jia{
  float: right;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: #fff;
  border: none;
  margin-right: 15px;
  border-radius: 50%;
  background: rgb(136,127,213);
}
</style>